<template>
    <div class="matchdetail">
        <div class="navimg">
            <img v-if="detailData.icon" :src="'http://img.wangyuhudong.com/'+detailData.icon" width="100%" height="100%">
        </div>
        <mt-navbar v-model="selected">
            <mt-tab-item :id="1">赛事介绍</mt-tab-item>
            <mt-tab-item :id="2">赛制/规则</mt-tab-item>
            <mt-tab-item :id="3">赛事奖励</mt-tab-item>
        </mt-navbar>

        <!-- tab-container -->
        <mt-tab-container v-model="selected">
            <mt-tab-container-item :id="1">
                <div class="title"></div>
                <div class="detail" v-html="detailData.summary"></div>
            </mt-tab-container-item>
            <mt-tab-container-item :id="2">
                <div class="title"></div>
                <div class="detail" v-html="detailData.rule"></div>
            </mt-tab-container-item>
            <mt-tab-container-item :id="3">
                <div class="title"></div>
                <div class="detail" v-html="detailData.reward"></div>
            </mt-tab-container-item>
        </mt-tab-container>
        <div class="c-flex c-j-c loading">
        <p v-show="loading" class="page-infinite-loading">
          <mt-spinner type="fading-circle" color="#fff" :size="30"></mt-spinner>加载中...
        </p>
      </div>
      <div class="mask" v-show="loading"></div>
    </div>
</template>

<script>
    export default {
        name: "matchDetail",
        data() {
            return {
                selected: 1,
                detailData: {},
                loading:false,
            }
        },
        mounted() {
            document.title = "";
            //获取赛事详情
            var params = {};
            params.matchId = this.$route.query.id;
            this.loading = true;
            this.axios.get('matches/info', { params: params })
                .then(res => {
                    this.loading = false;
                    this.detailData = res.data.object;
                })
                .catch(error => console.log(error));
            this.$nextTick(function () {
                this.selected = 1;
            })
        },
    };
</script>

<style lang="less">
    .matchdetail {
        .navimg {
            width: 7.5rem;
            height: 3.2rem;
        }

        .title {
            margin: .3rem 0 .2rem .3rem;
            ;
            font-size: .3rem;
            font-weight: bold;
        }

        .detail {
            width: 100%;
            height: 7.96rem;
            overflow: auto;
            color: #999;

            img {
                width: 7.5rem;
                height: auto;
            }

        }
        .mint-tab-container{
            margin: 0 .39rem;
        }
    }
</style>